<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> 
	<head>
		<title></title>
		<style>
		    .demo-upload-list{
		        display: inline-block;
		        width: 60px;
		        height: 60px;
		        text-align: center;
		        line-height: 60px;
		        border: 1px solid transparent;
		        border-radius: 4px;
		        overflow: hidden;
		        background: #fff;
		        position: relative;
		        box-shadow: 0 1px 1px rgba(0,0,0,.2);
		        margin-right: 4px;
		    }
		    .demo-upload-list img{
		        width: 100%;
		        height: 100%;
		    }
		    .demo-upload-list-cover{
		        display: none;
		        position: absolute;
		        top: 0;
		        bottom: 0;
		        left: 0;
		        right: 0;
		        background: rgba(0,0,0,.6);
		    }
		    .demo-upload-list:hover .demo-upload-list-cover{
		        display: block;
		    }
		    .demo-upload-list-cover i{
		        color: #fff;
		        font-size: 20px;
		        cursor: pointer;
		        margin: 0 2px;
		    }
		</style>
	</head>
	<body>
		<div id="contentContainer" width="100%" height="100%" style="margin: 15px;">
			<!-- 综合查询 form -->
			<Collapse ref="vueQueryFormVisible" v-model="vueQueryFormVisible" accordion="true">
		        <Panel name="1">
		           	 综合查询
		            <p slot="content"  id="queryFormDomId"></p>
		        </Panel>
		    </Collapse>
			
			<!-- 按钮 -->
		 	<div style="margin-bottom: 10px;margin-top: 20px;">
		 		<Button-group>
			        <i-button type="ghost"  v-on:click="doAddButton()"><Icon type="ios-download-outline"></Icon> 新增</i-button>
			    	<i-button type="ghost"  v-on:click="doUpdateButton()"><Icon type="ios-download-outline"></Icon> 修改</i-button>
			    	<i-button type="ghost"  v-on:click="doDeleteButton()"><Icon type="ios-download-outline"></Icon> 删除</i-button>
			    </Button-group>
			</div>
			
			<!-- 数据表格 -->
			<i-table border="true" :context="self" :columns="vueTableColumns" :data="vueTableData"  v-on:on-selection-change="getCheckedTableRow($event)" ></i-table>
			
			<!-- 分页标签 -->
			<div style="margin: 10px;overflow: hidden">
		        <div style="float: right;">
		            <Page show-total="true" :page-size="vuePageSize" :total="vueRecordTotal" :current="vueCurrentPage" v-on:on-change="doPageTurning($event)"></Page>
		        </div>
		    </div>
			
			<!-- 新增用户 -->
	    	<Modal
		    	width="600"
		        v-model="vueAddModalVisible"
		      	:styles="{top: '80px'}"
		        title="增加用户">
	       	
		       	<i-form ref="vueAddForm" :model="vueAddForm" :rules="vueAddFormRules" :label-width="80">
		       		<Form-item prop="id" v-show="false">
			            <i-input v-model="vueAddForm.id" ></i-input>
			        </Form-item>
			        <Form-item label="姓名" prop="username">
			            <i-input v-model="vueAddForm.username" placeholder="请输入姓名"></i-input>
			        </Form-item>
			        <Form-item label="密码" prop="password">
			            <i-input v-model="vueAddForm.password" type="password" placeholder="请输入密码"></i-input>
			        </Form-item>
			        <Form-item label="确认密码" prop="repassword">
			            <i-input v-model="vueAddForm.repassword" type="password" placeholder="请输入确认密码"></i-input>
			        </Form-item>
			        <Form-item label="昵称" prop="nickname">
			            <i-input v-model="vueAddForm.nickname" placeholder="请输入确认密码"></i-input>
			        </Form-item>
			        <Form-item label="手机号码" prop="phone">
			        	<i-input v-model="vueAddForm.phone" placeholder="请输入确认密码"></i-input>
			        </Form-item>
			        <Form-item label="电子邮箱" prop="email">
			        	<i-input v-model="vueAddForm.email" placeholder="请输入确认密码"></i-input>
			        </Form-item>
			        <Form-item label="可用状态" prop="status">
			            <Radio-group v-model="vueAddForm.status" type="button">
					        <Radio label="1"><span>可用</span></Radio>
					        <Radio label="0"><span>冻结</span></Radio>
					    </Radio-group>
			        </Form-item>
			    </i-form>
			    
			     <!-- 上传图片 -->
			    <div class="demo-upload-list" v-for="item in uploadList">
			            <img :src="item.url"/>
			            <div class="demo-upload-list-cover">
			                <Icon type="ios-eye-outline" v-on:click.native="handleView(item.name)"></Icon>
			                <Icon type="ios-trash-outline" v-on:click.native="handleRemove(item.name)"></Icon>
			            </div>
			      
			    </div>
			    
			   <Upload
			        ref="upload"
			        :show-upload-list="false"
			        :format="['jpg','jpeg','png']"
			        :max-size="2048"
			        :before-upload="handleBeforeUpload"
			        type="drag"
			        style="display: inline-block;width:58px;">
			        <div style="width: 58px;height:58px;line-height: 58px;">
			            <Icon type="camera" size="20"></Icon>
			        </div>
			    </Upload>
			    <Modal title="查看图片"  v-model="imgvisible">
			        <img :src="imgName" style="width: 100%" />
			    </Modal>
			    <!-- 上传图片 end-->
			    
		    	<!-- 自定义 modal 底部按钮 -->
			    <div slot="footer">
			     	<i-button type="primary"  v-on:click="submitAddForm()">提交</i-button>
		            <i-button type="primary"  v-on:click="resetForm('vueAddForm')"  style="margin-left: 8px">重置</i-button>
		            <i-button type="primary"  v-on:click="vueAddModalVisible = false"  style="margin-left: 8px">取消</i-button>
		        </div>
	    	</Modal>
	    	
	    	<!-- 删除 -->
		    <Modal v-model="vueDeleteModalVisible" width="360">
		        <p slot="header" style="color:#f60;text-align:center">
		            <Icon type="information-circled"></Icon>
		            <span>删除确认</span>
		        </p>
		        <div style="text-align:center">
		            <p>{{vueDeleteMessage}} </p>
		        </div>
		        <div slot="footer">
		        	<i-button type="error"  :loading="vueDeleteProgressVisible" v-on:click="submitDeleteForm">删除</i-button>
		        	<i-button type="primary"  v-on:click="vueDeleteModalVisible = false">取消</i-button>
		        </div>
		    </Modal>
		    
		    <!-- 修改 -->
	    	<Modal
		    	width="600"
		        v-model="vueUpdateModalVisible"
		      	:styles="{top: '50px'}"
		        title="修改用户">
	       	
			    <i-form ref="vueUpdateForm" :model="vueUpdateForm" :rules="vueUpdateFormRules" :label-width="80">
			    	<Form-item prop="id" v-show="false">
			            <i-input v-model="vueUpdateForm.id" ></i-input>
			        </Form-item>
			        <Form-item label="姓名" prop="username">
			            <i-input v-model="vueUpdateForm.username" disabled="true"  placeholder="请输入姓名"></i-input>
			        </Form-item>
			        <Form-item label="密码" prop="password">
			            <i-input v-model="vueUpdateForm.password"  type="password" placeholder="请输入密码"></i-input>
			        </Form-item>
			        <Form-item label="确认密码" prop="repassword">
			            <i-input v-model="vueUpdateForm.repassword" type="password" placeholder="请输入确认密码"></i-input>
			        </Form-item>
			        <Form-item label="昵称" disabled="true"  prop="nickname">
			            <i-input v-model="vueUpdateForm.nickname" placeholder="请输入确认密码"></i-input>
			        </Form-item>
			        <Form-item label="手机号码" prop="phone">
			        	<i-input v-model="vueUpdateForm.phone" placeholder="请输入确认密码"></i-input>
			        </Form-item>
			        <Form-item label="电子邮箱" prop="email">
			        	<i-input v-model="vueUpdateForm.email" placeholder="请输入确认密码"></i-input>
			        </Form-item>
			        <Form-item label="可用状态" prop="status">
			            <Radio-group v-model="vueUpdateForm.status" type="button">
					        <Radio label="1"><span>可用</span></Radio>
					        <Radio label="0"><span>冻结</span></Radio>
					    </Radio-group>
			        </Form-item>
			    </i-form>
			    
			     <!-- 上传图片 -->
			    <div class="demo-upload-list" v-for="item in uploadList">
			            <img :src="item.url"/>
			            <div class="demo-upload-list-cover">
			                <Icon type="ios-eye-outline" v-on:click.native="handleView(item.name)"></Icon>
			                <Icon type="ios-trash-outline" v-on:click.native="handleRemove(item.name)"></Icon>
			            </div>
			    </div>
			   <Upload
			        ref="upload"
			        :show-upload-list="false"
			        :format="['jpg','jpeg','png']"
			        :max-size="2048"
			        :before-upload="handleBeforeUpload"
			        type="drag"
			        style="display: inline-block;width:58px;">
			        <div style="width: 58px;height:58px;line-height: 58px;">
			            <Icon type="camera" size="20"></Icon>
			        </div>
			    </Upload>
			    <Modal title="查看图片"  v-model="imgvisible">
			        <img :src="imgName" style="width: 100%" />
			    </Modal>
			    <!-- 上传图片 end-->
			    
		    	<!-- 自定义 modal 底部按钮 -->
			    <div slot="footer">
			     	<i-button type="primary"  v-on:click="submitUpdateForm()">提交</i-button>
		            <i-button type="primary"  v-on:click="vueUpdateModalVisible = false"  style="margin-left: 8px">取消</i-button>
		        </div>
	    	</Modal>
	    	
	    	
	    	
	    	<Back-top></Back-top>
		</div>
		
	 	<script th:src="@{/static/js/utils/table-utils.js}"></script>
		<script th:src="@{/static/js/utils/form-utils.js}"></script>
	 	<script th:src="@{/static/js/utils/iview-utils.js}"></script>
	 	
	 	<script th:src="@{/static/js/business/user-biz.js}"></script>
	</body>
</html>